<template>
	<view>
		<view v-if="carts.length == 0" style="position: fixed;width: 100%;top: 0;bottom: 0;display: flex;align-items: center;justify-content: center;flex-direction: column;">
			<view style="line-height: 80upx;">购物车空空如也</view>
			<view style="background-color: #FF387B;color: white;padding: 15upx 40upx;border-radius: 40upx;">去购物</view>
		</view>
		<view v-else style="padding: 20upx;">
			<checkbox-group @change="checked">
				<view v-for="(item,key) in carts" :key="key" style="display: flex;flex-direction: row;margin-bottom: 20upx;">
					<view style="margin-right: 20upx;height: 200upx;display: flex;align-items: center;">
						<label>
							<checkbox color="#FF387B" :value="key" />
						</label>
					</view>
					<view style="flex: 1;display: flex;padding: 20upx;background-color: white;border-radius: 15upx;">
						<image style="width: 200upx;height: 160upx;" :src="item.goods.picUrl"></image>
						<view style="flex: 1;height: 160upx;margin-left: 15upx;display: flex;flex-direction: column;justify-content: space-between;">
							<view style="font-weight: bold;font-size: 26upx;line-height: 1.2;">{{item.goods.name}}</view>
							<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
								<text style="font-weight: bold;font-size: 26upx;color: #FF387B;">￥{{item.goods.favorablePrice}}</text>
								<view style="font-weight: bold;display: flex;align-items: center;">
									<image @tap="subtract(item.goods)" style="width: 45upx;height: 45upx;" :src="select[item.goods.goodsId] > 0 ? '/static/subtract.png' : '/static/subtract01.png'"></image>
									<text style="margin: 20upx;font-size: 30upx;">{{select[item.goods.goodsId] ? select[item.goods.goodsId].count : 0}}</text>
									<image @tap="add(item.goods)" style="width: 45upx;height: 45upx;" src="/static/add.png"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>
			<!-- 底部 -->
			<view style="display: flex;align-items: center;background-color: white;padding: 0 20upx;position: fixed;left: 0;right: 0;bottom: 0;">
				<label>
					<checkbox color="#FF387B" :checked="checkAll" />
				</label>
				<view style="flex: 1;text-align: right;padding: 10upx 30upx;">
					<view>
						<text style="font-size: 25upx;">合计:</text>
						<text style="font-weight: bold;color: #FF387B;font-size: 35upx;font-weight: bold;">￥{{favorablePrices}}</text>
					</view>
					<view style="font-size: 22upx;">已优惠：{{(retailPrices-favorablePrices).toFixed(2)}}</view>
				</view>
				<view @tap="toCheckout" style="padding: 10upx 30upx;background-color: #FF387B;color: white;font-weight: bold;border-radius: 40upx;">去结算({{count}})</view>
			</view>
		</view>
		<chun-lei-modal type="login" :value="modalShow" @cancel="dontLogin" @onConfirm="toLogin"></chun-lei-modal>
	</view>
</template>

<script>
	import chunLeiModal from '@/components/chunLei-modal/chunLei-modal.vue'
	export default {
		components:{
			chunLeiModal
		},
		data() {
			return {
				user:null,
				select: {},
				carts: [],
				favorablePrices: 0,
				retailPrices: 0,
				count: 0,
				checkedItem:[],
				checkAll: false,
				selectGoods:[],
				team: uni.getStorageSync('current_team'),
				modalShow: false
			}
		},
		onTabItemTap() {
			this.onshow()
			
		},
		methods: {
			onshow(){
				var user = uni.getStorageSync('user')
				console.log(111,user)
				if(user){
					this.user = JSON.parse(user)
				}else{
					this.modalShow = true
					return
				}
				
				this.select = this.shopCart
				// console.log(this.select)
				// console.log(Object.keys(this.select))
				// console.log(Object.values(this.select))
				this.carts = Object.values(this.select)
				this.checked()
				this.team= uni.getStorageSync('current_team')
				this.$forceUpdate()
			},
			dontLogin(){
				uni.switchTab({
					url:'../home/home'
				})
			},
			toLogin(e) {
				this.modalShow = false
				// 用户信息
				console.log(1, e);
				uni.login({
					success: (res) => {
						console.log(2, res)
						uni.request({
							url: this.apiUrl + "/client/user/login",
							method: "POST",
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							data: {
								code: res.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
								rawData: e.detail.rawData,
								signature: e.detail.signature
							},
							success: (res) => {
								const result = res.data;
								console.log(result)
								if (result.code === 200) {
									this.user = result.data
									uni.setStorageSync('user', JSON.stringify(result.data));
									this.onshow()
								} else {
									uni.showToast({
										title: result.msg,
										icon: "none"
									});
								}
							},
							fail: (res) => {
								uni.showToast({
									title: res.errMsg,
									icon: "none"
								});
							}
						})
					},
					fail: (err) => {
						console.log(3, err)
					}
				})
			},
			add(goods) {
				this.addCart(goods)
				this.select = this.shopCart
				this.carts = Object.values(this.select)
				this.checked()
				this.$forceUpdate()
			},
			subtract(goods) {
				this.subtractCart(goods)
				this.select = this.shopCart
				this.carts = Object.values(this.select)
				this.checked()
				this.$forceUpdate()
			},
			toCheckout() {
				if(this.count > 0){
					uni.navigateTo({
						url: '../../products/confirm_order?carts=' + encodeURIComponent(JSON.stringify(this.selectGoods)) + '&team=' +
							encodeURIComponent(this.team)
					})
				}
				
			},
			checked(e) {
				if(e){
					this.checkedItem = e.detail.value
				}
				var favorablePrices = 0
				var retailPrices = 0
				var goodsCount = 0
				var count = 0
				var selectGoods = []
				for (var i = 0; i < this.carts.length; i++) {
					if (this.checkedItem.indexOf(i+'') > -1) {
						favorablePrices += this.carts[i].goods.favorablePrice * this.carts[i].count
						retailPrices += this.carts[i].goods.retailPrice * this.carts[i].count
						count += this.carts[i].count
						goodsCount++
						selectGoods.push(this.carts[i])
					}
				}
				
				console.log(favorablePrices, retailPrices)
				this.favorablePrices = favorablePrices.toFixed(2)
				this.retailPrices = retailPrices.toFixed(2)
				this.count = count
				this.checkAll = goodsCount == this.carts.length
				this.selectGoods = selectGoods
			}
		}
	}
</script>

<style>

</style>
